<template>
  <div class="address">
    <div class="cart-list-title">
      <h2 style="text-align: center; font-size: 30px; font-weight: 700">
        订单明细-快递配送
      </h2>
    </div>
    <div class="cart-list-adress">
      <h2 style="font-size: 15px">
        <el-button type="text" @click="dialogTableVisible = true"
          >选择收货地址</el-button
        >

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
          <el-table
            ref="singleTable"
            :data="Datas"
            height="250"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
              property="address_name"
              label="姓名"
              width="150"
            ></el-table-column>
            <el-table-column
              property="address_phone"
              label="联系方式"
              width="200"
            ></el-table-column>
            <el-table-column
              property="address_details"
              label="地址"
            ></el-table-column>
          </el-table>
          <div style="margin-top: 20px"></div>
        </el-dialog>

        <el-button @click="dialogFormVisible = true" style="margin-left: 10px">
          新增收货地址
        </el-button>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="收件人*" :label-width="formLabelWidth">
              <el-input
                v-model="form.address_name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话*" :label-width="formLabelWidth">
              <el-input
                v-model="form.address_phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="所在地区*"
              :label-width="formLabelWidth"
              type="expand"
            >
              <el-cascader
                clearable
                class="elCacader"
                v-model="selectValue"
                :props="defultProp"
                :options="addressa"
                @change="handleChange"
              ></el-cascader>
              <!-- {{selectValue}} -->
            </el-form-item>

            <el-form-item label="详细地址*" :label-width="formLabelWidth">
              <el-input
                v-model="form.address_details"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="
                dialogFormVisible = false;
                newaddress();
              "
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </h2>
    </div>
    <div class="addressMenu">
      收件人：<span>{{ address.address_name }}</span
      ><br />
      联系电话：<span>{{ address.address_phone }}</span
      ><br />
      详细地址：<span
        >{{ address.address_prov }}{{ address.address_city
        }}{{ address.address_area }}{{ address.address_details }}</span
      >
    </div>
  </div>
</template>

<script>
import json from "../assets/address.json";
export default {
  name: "OrderAddress",
  data() {
    return {
      drawer: false,
      input: "",
      input3: "",
      select: "",
      Datas: [],
      address: [],
      aa: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        user_id: localStorage.getItem("user_id"),
        address_phone: "",
        address_name: "",
        address_details: "",
        address_city: "",
        address_prov: "",
      },
      // formLabelWidth: "120px",
      //地址
      selectValue: [],
      defultProp: {
        label: "name",
        value: "name",
        children: "sub",
      },
      addressa: [],
      formLabelWidth: "100",
      currentRow: null,
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.address = val;
      this.currentRow = val;
    },
    newaddress() {
      let phone = /^1\d{10}$/;
      if (phone.test(this.form.address_phone)) {
        this.$axios
          .post("/api/address/addNewAddress", {
            user_id: localStorage.getItem("user_id"),
            address_name: this.form.address_name,
            address_phone: this.form.address_phone,
            address_prov: this.selectValue[0],
            address_city: this.selectValue[1],
            address_area: this.selectValue[2],
            address_details: this.form.address_details,
          })
          .then((res) => {
            this.$router.go(0);
          });
      } else {
        this.$alert("手机号格式错误", {
          confirmButtonText: "确定",
        });
      }
    },
    //地址
    listEdit() {
      console.log(json);
      this.addressa = json;
    },
    handleChange() {},
  },
  created() {
    this.$axios
      .get("/api/address/viewAddress", {
        params: { user_id: localStorage.getItem("user_id") },
      })
      .then((res) => {
        this.Datas = res.data.results;
        this.aa = this.Datas[0].address_name;
      });
    this.listEdit();
  },
  updated() {
    this.$bus.$emit("address", this.address);
  },
};
</script>

<style >
* {
  list-style: none;
}
.address {
  /* border-bottom:1px solid #999; */
  margin-bottom: 10px;
}
.el-message-box {
  width: 580px;
}
.addressMenu {
  font-size: 15px;
  margin-left: 10px;
  padding-top: 10px;
}
.addressMenu span {
  margin-bottom: 5px;
  font-weight: 700;
}
hr {
  width: 95%;
  height: 1px;
  padding-left: 15px;
  margin: 0 auto;
  background-color: #999;
}
.cart-list-title {
  margin-left: 20px;
  margin-right: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid #999;
}
.cart-list-adress {
  float: left;
  margin: 20px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.diqu_div {
  display: inline-block;
  background-color: rgb(12, 127, 204);
}
</style>